<div class="query-builder">
	<form [formGroup]="searchForm" class="h" nz-form>
		<div class="flex w align-items-center h">
			<div class="col-1-5 col-1-5-md">
				<nz-form-item nzFlex>
					<nz-form-label>区域</nz-form-label>
					<nz-form-control class="flex1">
						<nz-select (ngModelChange)="setPositionList($event)" formControlName="areaId" [nzShowSearch]="true" nzAllowClear>
							<nz-option *ngFor="let item of locationList" [nzLabel]="item?.name" [nzValue]="item?.id"></nz-option>
						</nz-select>
					</nz-form-control>
				</nz-form-item>
			</div>
			<div class="col-1-5 col-1-5-md">
				<nz-form-item nzFlex>
					<nz-form-label>货场</nz-form-label>
					<nz-form-control class="flex1">
						<nz-select formControlName="positionId" [nzShowSearch]="true" nzAllowClear>
							<nz-option *ngFor="let item of positionList" [nzLabel]="item?.name" [nzValue]="item?.id"></nz-option>
						</nz-select>
					</nz-form-control>
				</nz-form-item>
			</div>
			<div class="col-1-5 col-1-5-md">
				<nz-form-item nzFlex>
					<nz-form-label>船信息</nz-form-label>
					<nz-form-control class="flex1">
						<nz-select formControlName="transportShipId" nzShowSearch nzAllowClear (nzOnSearch)="searchShipList($event)">
							<nz-option *ngFor="let item of shipList" [nzValue]="item!.transportShipId"
												 [nzLabel]="item!.shipInfo"></nz-option>
						</nz-select>
					</nz-form-control>
				</nz-form-item>
			</div>
			<div class="col-1-5 col-1-5-md">
				<nz-form-item nzFlex>
					<nz-form-label>进出口</nz-form-label>
					<nz-form-control class="flex1">
						<nz-select formControlName="iE" nzShowSearch nzAllowClear>
							<nz-option *ngFor="let item of ieList" [nzValue]="item!.dictKey" [nzLabel]="item!.dictValue"></nz-option>
						</nz-select>
					</nz-form-control>
				</nz-form-item>
			</div>
			<div class="col-1-5 col-1-5-md">
				<div class="flex">
					<button (click)="search()" class="mr10" nz-button nzType="primary">搜索</button>
					<button (click)="reset()" class="mr10" nz-button nzType="default">重置</button>
				</div>
			</div>
		</div>
	</form>
</div>
<nz-card [nzBodyStyle]="{ padding: '12px 12px 0px 12px' }" [nzBordered]="false" class="card-table" style="min-height: calc(100vh - 200px)">
	<st
		#st
		[size]="'small'"
		class="hover-table fix-table st-odd-table"
		[resizable]="true"
		[scroll]="{ y: 'calc(100vh - 265px)' }"
		[data]="dataList"
		[columns]="columns"
		[page]="pageSetting"
		[total]="this.pageInfo.total"
		[ps]="this.pageInfo.size"
		[pi]="this.pageInfo.current"
		[loading]="this.pageInfo.loading"
		(change)="stChange($event)"
		[clickRowClassName]="sa"
		[footer]="total"
	>
		<ng-template st-row="manage" let-item>
						<a class="text-blue-500" (click)="detail(item)">详情</a>
		</ng-template>
		<ng-template #total>
			<div class="flex w-full">
				<div class="flex w-full justify-end gap-5">
					<div class="flex">总件吨：{{ totalData?.piece }} / {{ totalData?.ton }}</div>
				</div>
			</div>
		</ng-template>
	</st>
</nz-card>
